<link rel="stylesheet" href="/css/animate.min.css" />

<style>
  @keyframes fadeInUp1 {
    from {
      opacity: 0.8;
      -webkit-transform: translate3d(0, 40%, 0);
      transform: translate3d(0, 40%, 0);
    }

    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }

  .animate__fadeInUp1 {
    -webkit-animation-name: fadeInUp1;
    animation-name: fadeInUp1;
  }
</style>

<div id="app" v-cloak>
  <div class="relative px2 py2" style="background-size: cover; background-image: url(/img/red/bg.png); font-size: 16px">
    <!-- 领取记录 -->
    <img src="/img/red/log_btn.png" class="absolute" style="width: 2rem; top: 1rem; right: 0px; z-index: 4"
      @click="showOrders=true" />

    <div class="mx-auto relative" style="width: 20rem; height: 20.5rem">
      <div class="absolute top-0" v-if="!opened" style="
          z-index: 2;
          background-size: cover;
          background-image: url(/img/red/red-top.png);
          width: 20rem;
          height: 13.19rem;
        "></div>

      <div class="absolute animate__animated animate__fadeInUp1" style="
          background-size: cover;
          width: 16.2rem;
          height: 14.33rem;
          background-image: url(/img/red/red-bg.png);
          left: 1.9rem;
        ">
        <div style="padding: 2.5rem">
          <div style="color: #c86131; font-size: 1.3rem">恭喜您获得</div>
          <div class="center" style="color: #e94545; font-size: 3.6rem">{{red.red_money}}元</div>
          <div class="center" style="color: #48b748; font-size: 0.9rem">已到账微信钱包, 请查收</div>
        </div>
      </div>

      <div class="center absolute bottom-0" style="
          z-index: 1;
          background-size: cover;
          background-image: url(/img/red/red-bottom.png);
          width: 20rem;
          height: 14.16rem;
        "></div>
      <div v-if="!opened">
        <img v-if="count>0" class="center absolute animate__animated animate__infinite animate__pulse"
          @click="consumeItem" style="z-index: 3; left: 7.5rem; bottom: 5rem; width: 5rem; height: 5rem"
          src="/img/red/open.png" />
        <img v-else class="center absolute" style="z-index: 3; left: 7.5rem; bottom: 5rem; width: 5rem; height: 5rem"
          src="/img/red/open-gray.png" />
      </div>
      <div v-else class="white absolute center" @click="opened=false" style="
          z-index: 3;
          background-size: contain;
          left: 1.9rem;
          bottom: 3rem;
          line-height: 2.95rem;
          width: 16rem;
          height: 3rem;
          font-size: 1.5rem;
          background-image: url(/img/red/reopen.png);
        ">
        继续开红包
      </div>
      <div class="center absolute" style="z-index: 3; bottom: 1rem; width: 100%; color: #feda8a">
        现有{{pointData.point}}积分, 可开红包:{{count}}个
      </div>
    </div>
  </div>

  <div style="padding: 15px">
    <div class="mb2">
      <div class="flex items-end" style="color: #f97d00; text-align: center">
        <div class="bold" v-bind:class="{ 'active-tab': currentTab=='rank' }"
          style="flex: 1; border-top-left-radius: 8px; padding: 15px 0; background: #fdeec3" @click="currentTab='rank'">
          积分排行榜
        </div>
        <div class="bold" v-bind:class="{ 'active-tab': currentTab=='log' }"
          style="flex: 1; border-top-right-radius: 8px; background: #fdeec3; padding: 15px 0" @click="currentTab='log'">
          积分记录
        </div>
      </div>

      <div class="bg-white p1" v-if="currentTab=='rank'">
        <div style="color: #9c8484" class="flex items-center font-13">
          <div class="p1" style="width: 40px">排名</div>
          <div class="p1" style="flex: 1">昵称</div>
          <div class="p1">积分</div>
        </div>
        <div v-if="showMore || i<10" v-for="rank, i in ranks" class="flex items-center" v-bind:id="rank._id">
          <div class="p1 font-18 bold" style="width: 40px; color: #f97d00">{{i+1}}</div>
          <div class="p1 flex items-center" style="flex: 1">
            <!-- <img
              v-bind:src="rank.userinfo? rank.userinfo.headimgurl:''"
              style="width: 35px; height: 35px"
              class="circle"
            /> -->
            <div class="px1 font-14 bold truncate" style="max-width: 140px">
              {{rank.userinfo?rank.userinfo.nickname:''}}
            </div>
          </div>
          <div class="font-20 bold p1">{{rank.point | toFixed}}</div>
        </div>

        <div v-if="ranks.length>10 && !showMore" class="blue bold center p1 m1" @click="showMore=true">查看更多</div>
      </div>
      <!-- ranks end -->

      <div class="bg-white" v-if="currentTab=='log' ">
        <div style="color: #9c8484" class="flex items-center font-13">
          <div class="p2" style="flex: 1">积分记录</div>
          <div class="p2">积分变动</div>
        </div>

        <div v-for="log in logs" class="flex items-center">
          <div class="p2" style="flex: 1">
            <div class="font-14 bold">{{log.desc}}</div>
            <div class="gray font-12">{{log.createTime}}</div>
          </div>
          <div class="p2 flex items-center" v-bind:class="{red:log.point>0, green: log.point<0}">
            <img src="/img/red/coin.png" style="width: 18px; height: 18px" />
            <div class="font-18 bold right-align" style="width: 40px">{{log.point | toFixed}}</div>
          </div>
        </div>

        <div v-if="logs.length==0" class="gray my2 center">
          <img src="/img/red/empty.png" style="width: 150px" />
          <div class="font-12 bold">没有更多数据了</div>
        </div>
      </div>
      <!-- logs end -->
    </div>
  </div>

  <div v-show="showOrders">
    <div class="weui-mask" @click="showOrders=false"></div>
    <div class="weui-half-screen-dialog">
      <div class="weui-half-screen-dialog__hd">
        <div class="weui-half-screen-dialog__hd__side">
          <button class="weui-icon-btn" @click="showOrders=false">
            <i class="weui-icon-back-arrow-thin"></i>
          </button>
        </div>
        <div class="weui-half-screen-dialog__hd__main">
          <strong class="weui-half-screen-dialog__title"> 红包记录 </strong>
        </div>
      </div>

      <div class="weui-half-screen-dialog__bd">
        <div class="weui-cells">
          <div class="weui-cell" v-for="order in pointOrders">
            <div class="weui-cell__bd">
              <div class="bolder red font-18">￥{{order.item.red_money}}</div>
            </div>
            <div class="weui-cell__ft">{{order.time}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  let clientid = "<%=clientid%>";
  new Vue({
    el: '#app',
    data: function () {
      return {
        showMore: false,
        red: <% -JSON.stringify(red) %>,
        pointData: <% -JSON.stringify(pointData || '') %>,
        user: <% -JSON.stringify(user || '') %>,
        ranks: [],
        logs: [],
        pointOrders: [],
        opened: false,
        showOrders: false,
        currentTab: 'rank'
      }
    },
    filters: {
      toFixed: (d) => {
        return parseFloat(d).toFixed(2).replace('.00', '');
      }
    },
    computed: {
      count: function () {
        if (!this.pointData) {
          return 0
        }
        return Math.floor(this.pointData.point / this.red.point)
      }
    },
    created: function () {
      this.refresh()
    },

    methods: {
      refresh: function () {
        this.getRanks()
        this.getLogs()
        this.getPointOrders()
      },
      getRanks: function () {
        let that = this;
        axios.get('/user/client/' + clientid + '/ranks').then(function (res) {
          that.ranks = res.data.ranks
        })
      },
      getLogs: function () {
        let that = this;
        axios.get('/user/client/' + clientid + '/pointLogs').then(function (res) {
          that.logs = res.data.pointLogs
        })
      },
      consumeItem: function () {
        let that = this;
        if (that.loading) {
          return
        }
        that.loading = true
        axios
          .post("/user/consume/" + this.red._id)
          .then(function (res) {
            that.loading = false
            if (!res.data.status) {
              return weui.topTips(res.data.msg);
            }
            // weui.toast("兑换成功");
            that.opened = true;
            that.pointData.point -= that.red.point
            that.red = res.data.item
            that.refresh()
          });
      },
      getPointOrders: function () {
        let that = this;
        axios
          .get("/user/client/<%=clientid%>/redorders")
          .then(function (res) {
            that.pointOrders = res.data.pointOrders;
          });
      },
    }
  })
</script>

<style>
  body {
    background: #ffcb94;
  }

  .active-tab {
    background: white !important;
    padding: 20px 4px !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
</style>